<template>
	<view class="container pre-hover" hover-class="hover-scale" :hover-start-time="0">
		<view class="list-item pre-hover" hover-class="hover-scale" :key="index" @tap="navigateTo('product.common.detail', { id: listItem.goodsId })">
			<view class="img-box">
				<image :src="listItem.goodsThumbnail || ''" mode="aspectFill" class="image" :class="{ sellClear: listItem.remainStock == 0, isOvered: listItem.isOvered }"></image>
				<view class="topRightBox flex_row_c_c">
					<text class="QS-text mini-xx color_ffffff display_block" style="line-height: 24rpx;">已售{{listItem.saleCount || 0}}</text>
				</view>
			</view>
			<view class="bot-box">
				<text class="name">{{listItem.goodsName || ''}}</text>
				<QS-P height="24rpx"></QS-P>
				<view class="flex_row_none_c">
					<view class="text-tabel-cell-bottom">
						<text class="QS-text mini-xxx price-color price-weight">{{listItem | filterPricePreIcon}}</text>
						<text class="QS-text large price-color price-weight">{{listItem | filterPriceAndIntegrate(filterPriceAndIntegrateConfig)}}</text>
					</view>
					<QS-P width="15rpx"></QS-P>
					<text class="QS-text mini-xxx color_BBBBBB text-decoration_line-through">{{listItem | filterNullPrice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listItem: {
				type: [Object, String, Number, Array],
				default: () => {
					return {}
				}
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				imgShow: false,
				filterPriceAndIntegrateConfig: {
					hasPreIcon: false
				}
			}
		},
		methods: {
			// _click() {
			// 	console.log(this.listItem);
			// 	if(this.listItem.type == 'ad') return;
			// 	uni.$qs.navigateTo('product.common.detail', { id: this.listItem.goodsId })
			// },
			imageLoaded(e) {
				this.$emit('imgLoaded')
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		flex-direction: column;
		border-radius: 10rpx;
		overflow: hidden;
		// padding: 15rpx;
		background-color: #fff;
	}

	.list-item {
		width: 100%;
		border: 1px solid #F2F2F2;
		border-radius: 10rpx;
		overflow: hidden;
		// margin-bottom: 20rpx;
		// margin-right: 20rpx;
	
		&:nth-child(2n) {
			margin-right: 0;
		}
	
		.img-box {
			position: relative;
			width: 100%;
			padding-top: 100%;
			// height: 100%;
	
			.image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #B7E9FF;
			}
	
			.topRightBox {
				position: absolute;
				top: 0;
				right: 0;
				padding: 8rpx 14rpx;
				border-bottom-left-radius: 8rpx;
				border-top-right-radius: 8rpx;
				background-color: rgba(0, 0, 0, .15);
			}
		}
	
		.bot-box {
			padding: 32rpx 26rpx;
	
			.name {
				width: 100%;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 32rpx;
			}
		}
	}
</style>
